<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-focus:[args].bg="bg" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      //:指令参数   .修饰符
      //动态指令参数 用中括号包裹起来
      const vm = new Vue({
        el: "#app",
        directives: {
          focus: {
            bind(el, binding) {},
            inserted(el, binding) {
              console.log(el);
              console.log(binding.arg);
              if (binding.arg == "element") {
                el.value = "唱跳rap";
              }
              el.style.background = binding.value
            },
            update(el, binding) {
              if (binding.arg == "element") {
                el.value = "uuu";
              }else if(binding.arg =="yy"){
                el.value="🍌🍌🍌"
              };
            },
          },
        },
        data: {
          args: "element",
          bg:"hotpink"
        },
        methods: {},
      });
    </script>
  </body>
</html>
